前文列表

新建表单

jmilkfansblog/forms.py
博客文章的新建和编辑的表单非常简单, 只需要输入 title 和 content 就可以了.

class PostForm(Form):    """Post Form."""    title = StringField('Title', [DataRequired(), Length(max=255)])    text = TextAreaField('Blog Content', [DataRequired()])

新建视图函数

博客文章的添加和编辑仍然属于蓝图 blog 的功能集, 所以我们会在控制器 blog 模块中定义新的视图函数

jmilkfansblog/controller/blog.py

@blog_blueprint.route('/new', methods=['GET', 'POST'])def new_post():    """View function for new_port."""    form = PostForm()    if form.validate_on_submit():        new_post = Post(id=str(uuid4()), title=form.title.data)        new_post.text = form.text.data        new_post.publish_date = datetime.now()        db.session.add(new_post)        db.session.commit()        return redirect(url_for('blog.home'))    return render_template('new_post.html',                           form=form)@blog_blueprint.route('/edit/
    
     ', methods=['GET', 'POST'])def edit_post(id):    """View function for edit_post."""    post = Post.query.get_or_404(id)    form = PostForm()    if form.validate_on_submit():        post.title = form.title.data        post.text = form.text.data        post.publish_date = datetime.now()        # Update the post        db.session.add(post)        db.session.commit()        return redirect(url_for('blog.post', post_id=post.id))    form.title.data = post.title    form.text.data = post.text    return render_template('edit_post.html', form=form, post=post)

NOTE 1: 添加博客文章时, 如果添加成功了就将输入到表单中的内容写入到数据库并将表单的数据传入 new_post 模板.

NOTE 2: 编辑博客文章时, 在表单的输入框中会含有原来的博客内容, 当编辑成功后会将新的博客内容写入数据库并重定向到文章页面.

新建模板

jmilkfansblog/template/blog/new_post.html

{% block title %}New Post{% endblock %}{% block body %}
      
     Create A New Post
  
     
          {
    { form.hidden_tag() }}    
      
             {
    { form.title.label }}      {% if form.title.errors %}        {% for e in form.title.errors %}          
       {
    { e }}
        {% endfor %}      {% endif %}      {
    { form.title(class_='form-control') }}    
      
    
      
             {
    { form.text.label }}      {% if form.text.errors %}        {% for e in form.text.errors %}          
       {
    { e }}
        {% endfor %}      {% endif %}      {
    { form.text(id="editor", class_='form-contril') }}    
      
    
        
     
    
{% endblock %}{% block js %}{% endblock %}

jmilkfansblog/template/blog/edit_post.html

{% extends "base.html" %}{% block title %}Edit Post{% endblock %}{% block body %}
      
     Edit the Post
  
     
          {
    { form.hidden_tag() }}    
      
             {
    { form.title.label }}      {% if form.title.errors %}        {% for e in form.title.errors %}          
       {
    { e }}
        {% endfor %}      {% endif %}      {
    { form.title(class_='form-control', value=post.title) }}    
      
    
      
             {
    { form.text.label }}      {% if form.text.errors %}        {% for e in form.text.errors %}          
       {
    { e }}
        {% endfor %}      {% endif %}      {
    { form.text(id="editor", class_='form-contril') }}    
      
    
        
     
    
{% endblock %}{% block js %}{% endblock %}

NOTE: 在模板 new_post 和 edit_post 中都加入了一个所见即所得 (WYSIWYG) 的博客文章编辑器 CKEditor, 该编辑器是一个 JavaScript 文件 <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>, CKEditor 的安装和使用都是非常方便的.

在博客文章页面添加 New 和 Edit 按钮

{% block body %}{
    { post.title }}
      
         
      Written By {
    { post.users.username }} on {
    { post.publish_date }}
    
      {
    { post.text | safe }}
  
     
  
         
            
       New    
      
  
     
  
         
            
       Edit    
      
  
     
  
     
      ...